<template>
  <div id="app1">
    <img src="../../../../../public/600.png" alt="Banner Image" class="banner-image" />
    <Header />
    <router-view></router-view>
    <Carousel />
    <div class="modules-container">
      <Module1 />
      <Module2 />
      <Module3 />
      <Module4 />
    </div>
    <Footer />
  </div>
</template>

<script>
import Carousel from '@/modules/module6/module6-zongshu/components/Carousel.vue'
import Footer from '@/modules/module6/module6-zongshu/components/Footer.vue'
import Header from '@/modules/module6/module6-zongshu/components/Header.vue'
import Module1 from '@/modules/module6/module6-zongshu/components/Module1.vue'
import Module2 from '@/modules/module6/module6-zongshu/components/Module2.vue'
import Module3 from '@/modules/module6/module6-zongshu/components/Module3.vue'
import Module4 from '@/modules/module6/module6-zongshu/components/Module4.vue'

export default {
  components: {
    Header,
    Carousel,
    Module1,
    Module2,
    Module3,
    Module4,
    Footer
  }
}
</script>

<style>
#app1 {
  font-family: Avenir, Helvetica, 宋体, sans-serif;
  text-align: center;
  color: #2c3e50;
  background-color: rgb(250, 248, 239);
}
.banner-image {
  width: 100%;
  height: auto;
  object-fit: cover;
}
.modules-container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap; /* 如果模块太多超出屏幕宽度，它们将换行 */
  margin-bottom: 42px;
}

.module {
  flex: 1; /* 模块将平均分配容器的宽度 */
  min-width: 200px; /* 设置模块的最小宽度，根据需要调整 */
  margin: 10px; /* 设置模块之间的间距 */
}
</style>
